<template>
	<view>
		<wrapTab :list="tab_list" v-model="type" :status="'type'" @onTab="onRefresh" />

		<view class="wrap safe-area">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item flex column">
						<view class="time-type flex align-center just-between">
							<view class="time limit-num-line f-26"> 推广时间:{{ item.createtime_text }} </view>

							<view class="type f-26">{{ item.type == 0 ? "现金红包" : "优惠券" }}</view>
						</view>

						<view class="wrap-content">
							<block v-if="item.type == 0">
								<view class="redbag-bg flex column">
									<view class="price-num flex align-center just-between">
										<view class="price-bg f-26">
											<text>总额:</text>
											<text class="price">{{ item.money }}</text>
										</view>

										<view class="num f-26">数量:{{ item.num }}</view>
									</view>

									<view class="red-type f-26 flex align-center">
										<text>红包类型:</text>
										<text>{{ item.distribution_type == 0 ? "普通红包" : "拼手气红包" }}</text>
									</view>
								</view>
							</block>

							<block v-else-if="item.type == 1">
								<view class="coupon-bg flex column">
									<view class="full-price f-28 flex align-center">
										<text>满</text>
										<text class="price">{{ item.coupon.limit }}</text>
										<text>元减</text>
										<text class="price">{{ item.coupon.price }}</text>
										<text>元</text>
									</view>

									<view class="time-num flex align-center just-between">
										<view class="time f-26">到期时间:{{ item.coupon.enddate }}</view>

										<view class="num f-26">数量:{{ item.num }}</view>
									</view>
								</view>
							</block>
						</view>

						<view class="bottom-btn-bg flex align-center just-end">
							<view class="btn f-30" @click="onReceiveRecords(item)">领取记录</view>
						</view>
					</view>
				</block>
			</view>

			<wanl-empty v-if="list.length === 0" />
		</view>
	</view>
</template>

<script>
	import { articleBonusLog } from "@/API/article.js";
	import wrapTab from "@/components/topTab/firstTab.vue";
	
	export default {
		components: {
			wrapTab
		},
		data() {
			return {
				article_id: "", //文章ID

				tab_list: [
					{ title: "全部", type: "0" },
					{ title: "优惠券", type: "1" },
					{ title: "红包", type: "2" },
				],
				type: "0", //

				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			this.article_id = options.article_id;
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 领取记录
			 */
			onReceiveRecords(item) {
				this.$jump.to(`/pages/home/article/receiveRecords?article_id=${this.article_id}&bonus_id=${item.id}`);
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				articleBonusLog({
					page: this.page,
					article_id: this.article_id,
					type: this.type,
				}).then((res) => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx 0rpx;
		box-sizing: border-box;

		.wrap-list {
			padding: 0 25rpx;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;

			.item {
				width: 100%;
				background-color: white;
				overflow: hidden;
				border-radius: 16rpx;
				padding: 0 25rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				gap: 20rpx;

				.time {
					flex: 1;
					--limit-num: 1;
					color: #888888;
				}

				.time-type {
					width: 100%;
					height: 80rpx;
					border-bottom: 2rpx solid #eeeeee;
					overflow: hidden;
					gap: 20rpx;

					.type {
						color: $theme-color;
					}
				}

				.wrap-content {
					width: 100%;
					overflow: hidden;

					.redbag-bg {
						width: 100%;
						overflow: hidden;
						gap: 20rpx;

						.price-num {
							gap: 20rpx;

							.price-bg {
								flex: 1;
								gap: 7rpx;
							}
						}

						.red-type {
							color: #888888;
							gap: 10rpx;
						}
					}

					.price {
						color: $theme-color;
					}

					.coupon-bg {
						width: 100%;
						overflow: hidden;
						gap: 20rpx;

						.full-price {
							gap: 10rpx;
							color: #121212;
						}

						.time-num {
							gap: 20rpx;
						}
					}

					.num {
						color: #888888;
					}
				}

				.bottom-btn-bg {
					border-top: 2rpx solid #eeeeee;
					width: 100%;
					height: 100rpx;
					overflow: hidden;

					.btn {
						width: 200rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						border-radius: 34rpx;
						overflow: hidden;
						background: $theme-gradit-color;
						color: white;
					}
				}
			}
		}
	}
</style>
